<template>
  <div class="zhiboxiaoshou_fabu2">
    <top v-if="!hide"></top>
    <div class="flex zhiboxitong_content">
      <div class="left" v-if="!hide">
        <left></left>
      </div>
      <div class="right" style="position: relative;height:calc(100vh - 100px);">
        <div class="zhiboxitong_right" >
          <div class="flex background_style" >
            <div style="width: 1000px;" class="flex">
              <div style="width: 400px;">
                <!-- <div style="margin: 20px 0; font-weight: bold;">装修店铺</div> -->
                 <!-- <el-button type="danger" style="bottom: 20px 0;" @click="mobanshow">选择模板</el-button> -->
                 
                  <div class="at_flex">
                  <img src="../../static/img/home_page.png"/>
                  <div>选择模版</div>
                </div>
   
                   <div class="template_select">
                    <span>请选择模板:</span>
                    <el-select v-model="moban" placeholder="请选择模板" @change="onChange">
                      <el-option
                       label="模板一"
                       :value="1">
                     </el-option>
                      <el-option
                       label="模板二"
                       :value="2">
                       </el-option>
                    </el-select>
                   </div>
                <div v-if="moban == 2">
                <!-- <div class="at_flex">
                  <img src="../../static/img/home_page.png"/>
                  <div>当前布局</div>
                </div>
                 <div class="share_shop">
                  <div style="font-size:14px;margin-right:10px">分享店铺</div>
                   <el-switch
                   
                    v-model="shareSwitch"
                    active-color="#3158F1"
                    inactive-color="#CCC">
                  </el-switch>
                   <span style="margin-left:8px;font-size:12px;"> 随页面滑动悬浮（突出展示）</span>
                 </div> -->
                 </div>
                  <div class="at_flex">
                  <img src="../../static/img/home_page.png"/>
                  <div>添加页面模块</div>
                </div>
                 <div style="width: 140px; height:100px; margin: 10px 0; cursor: pointer;border-radius: 10px;background:white" class="flexcc" @click="add(1)">
                   <img src="../../static/img/img_module.png" style="width:50px;height:50px"/>
                 </div>
                 <div class="tianjiatit" @click="add(1)">图片模块</div>
                 <div style="width: 140px; height:100px; background:white;margin-bottom: 10px; cursor: pointer;border-radius: 10px;" class="flexcc" @click="add(2)">
                   <img src="../../static/img/size_module.png" style="width:50px;height:50px"/>
                 </div>
                 <div class="tianjiatit" @click="add(2)">增加文字说明</div>
                 <div style="width: 140px; height:100px; background:white;margin-bottom: 10px; cursor: pointer;border-radius: 10px;" class="flexcc" @click="add(3)">
                  <img src="../../static/img/swiper_module.png" style="width:50px;height:50px"/>
                 </div>
                 <div class="tianjiatit" @click="add(3)">轮播图模块</div>

                 <div class="flex">
                   <div style="margin-right: 20px;">
                     <div style="width: 140px; height:100px; background:white;margin-bottom: 20px; cursor: pointer;border-radius: 10px;" class="flexcc" @click="add(4)">
                        <img src="../../static/img/topnav_module.png" style="width:100px;height:30px"/>
                     </div>
                     <div class="tianjiatit" @click="add(4)">顶部导航模块</div>
                   </div>
                   <div>
                     <div style="width: 140px; height:100px; background:white;margin-bottom: 20px; cursor: pointer;border-radius: 10px;" class="flexcc" @click="add(6)">
                         <img src="../../static/img/topnav_module.png" style="width:100px;height:30px"/>
                     </div>
                     <div class="tianjiatit" @click="add(6)">底部导航模块</div>
                   </div>
                 </div>
                   <div style="height: 100px;margin-top: 20px;">
                       <el-button @click="xiayibu()" style="width:160px;height:48px;border-radius: 12px;background:#005AFF;border:none;color:white">保存并下一步</el-button>
                  </div>
              </div>
              <div class="flex">
                <!-- 模板2 -->
                <div class="fleft" v-if="moban == 2">
                  <div class="shareClass" v-if="shareSwitch">
                  <img src="../../static/img/share.png"  style="width: 30px;height: 30px;margin-right: 5px;"/>
                    </div>
                  <!-- <div style="background: #fff; border-radius:5px 5px 0 0;"><img src="../../static/img/Status_black.png" style="width: 100%; margin:10px auto;"></div> -->
                  <div style="height: 620px; overflow: auto;" :style="youdima">

                    <div  v-for="(item,index) in list" :key="index"  :class="[[1,2,3,4,5,6,].indexOf(item.type)!=-1?'li':'',bianjiindex == index?'bianjizhong':'',item.type == 6?'dibudaohang':'',item.type == 7?'yincang':'']" >
                      <div v-if="item.type == 1" @click="bianji(item,index,$event)" :ref="'li'+index">
                        <div v-if="!item.img" class="awu">请点击编辑图片...</div>
                        <div v-if="item.img"><img :src="item.img" ></div>
                      </div>
                      <div v-if="item.type == 2" @click="bianji(item,index,$event)" :ref="'li'+index">
                        <div v-if="!item.text" class="awu">请点击编辑文字....</div>
                        <div v-if="item.text" style="font-size: 12px;padding: 10px;color: #666;">{{item.text}}</div>
                      </div>

                      <div v-if="item.type == 3" @click="bianji(item,index,$event)" :ref="'li'+index" style="width: 100%;height: 200px;">
                        <el-carousel height="200px" arrow="never" >
                            <el-carousel-item v-for="(item2,index2) in item.list" :key="index2" :style="{background:'url('+item2.img+')',backgroundSize:'cover'}">
                              <div v-if="!item2.img" class="awu">请先编辑图片...</div>
                              <!-- <div v-if="item2.img"><img :src="item2.img" ></div> -->
                            </el-carousel-item>
                          </el-carousel>
                      </div>

                      <div v-if="item.type == 4" @click="bianji(item,index,$event)" :ref="'li'+index" class="item_container">
                        <div class="flex" style="justify-content: space-around;padding: 20px 0;"  >
                          <div class="nav" v-for="(item2,index2) in item.list" :key="index2" v-if="item2.kaiguan">

                            <div class="flexcc" v-if="item2.img"><img :src="item2.img"/></div>
                            <div class="flexcc" v-if="!item2.img"><img src="../assets/img/fengjing.jpg"/></div>
                            <div v-if="item2.name" style="font-size: 12px;">{{item2.name}}</div>
                          </div>
                        </div>
                      </div>
                        
                      <div v-if="item.type == 5" @click="bianji(item,index,$event)" :ref="'li'+index">
                      <div class="tabs_container">
                         <div class="tabs_container_item">全部</div>
                         <div>分类1</div>
                         <div>分类2</div>
                         <div>分类3</div>
                         <div>分类4</div>
                         
                      </div>
                        <div class="flex" v-if="item.radio == 1">
                          <div class="yige flex" v-for="(item2,index2) in item.list" :key="index2">
                            <div class="shopliimg"><img :src="item2.img"/></div>
                            <div class="shopliname">
                              <!-- <div style="line-height: 20px;">{{item2.name}}</div> -->
                              <div style="color:#333;font-size:13px">商品标题</div>
                              <div style="color:#E90010;margin-top:5px;font-size:13px">提醒注意点</div>
                              <ul class="list_ul">
                                <li>卖点1</li>
                                <li>卖点2</li>
                                <li>卖点3</li>
                                <li>卖点4</li>
                              </ul>
                              <div class="flexbc" style="height: 49px;">
                                <div style="color: #E90010;">￥1.99</div>
                                <div style="color: white;border: 1px #E90010 solid;border-radius: 15px;padding: 5px 10px;background:#FF4747">立刻办理</div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="flexb" v-if="item.radio == 2">
                          <div class="liangge " v-for="(item2,index2) in item.list" :key="index2">
                            <div class="shopliimg"><img :src="item2.img"/></div>
                            <div class="shopliname">
                              <div style="line-height: 20px;">商品标题</div>
                              <div style="display:flex;justify-content: space-between;">
                                <div style="color: #E90010;"> ￥1.99</div>
                               <div style="color: white;border: 1px #E90010 solid;border-radius: 15px;padding: 5px 10px;background:#FF4747;margin-bottom:5px">立刻办理</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-if="item.type == 6" @click="bianji(item,index,$event)" :ref="'li'+index" >
                        <div class="flex" style="justify-content: space-around; padding-top: 5px;">
                          <div class="nav" v-for="(item2,index2) in item.list" :key="index2">
                            <div class="flexcc" v-if="item2.img"><img :src="item2.img" style="width: 18px; height: 18px; margin-bottom: 5px; display: block;"></img></div>
                            <div class="flexcc" v-if="!item2.img"><img src="../assets/img/fengjing.jpg"  style="width: 18px; height: 18px; margin-bottom: 5px; display: block;"></img></div>
                            <div v-if="item2.name" style="font-size: 12px; color: rgb(188, 188, 188);">{{item2.name}}</div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>


                </div>
                <!-- 模板1 -->
                <div class="fleft" v-if="moban == 1">
                  <!-- <div class="shareClass" v-if="shareSwitch">
                  <img src="../../static/img/share.png"  style="width: 30px;height: 30px;margin-right: 5px;"/>
                    </div> -->
                  <!-- <div style="background: #fff; border-radius:5px 5px 0 0;"><img src="../../static/img/Status_black.png" style="width: 100%; margin:10px auto;"></div> -->
                  <div style="height: 620px; overflow: auto;background:#F7F7F7" :style="youdima" >


                    <div v-for="(item,index) in list"  :key="index"  :class="[[1,2,3,4,5,6,].indexOf(item.type)!=-1?'li':'',bianjiindex == index?'bianjizhong':'',item.type == 6?'dibudaohang':'',item.type == 7?'yincang':'']" >
                      <div v-if="item.type == 1" @click="bianji(item,index,$event)" :ref="'li'+index">
                        <div v-if="!item.img" class="awu">请点击编辑图片...</div>
                        <div v-if="item.img"><img :src="item.img" ></div>
                      </div>
                      
                      <div v-if="item.type == 2" @click="bianji(item,index,$event)" :ref="'li'+index">
                        <div v-if="!item.text" class="awu">请点击编辑文字....</div>
                        <div v-if="item.text" style="font-size: 12px;padding: 10px;color: #666;">{{item.text}}</div>
                      </div>

                      <div v-if="item.type == 3" @click="bianji(item,index,$event)" :ref="'li'+index" style="width: 100%;height: 200px;">
                        <el-carousel height="200px" arrow="never" >
                            <el-carousel-item v-for="(item2,index2) in item.list" :key="index2" :style="{background:'url('+item2.img+')',backgroundSize:'cover'}">
                              <div v-if="!item2.img" class="awu">请先编辑图片...</div>
                              <!-- <div v-if="item2.img"><img :src="item2.img" ></div> -->
                            </el-carousel-item>
                          </el-carousel>
                      </div>
                      <div v-if="item.type == 4" @click="bianji(item,index,$event)" :ref="'li'+index" class="item_container">
                        <div class="flex" style="justify-content: space-around;padding: 20px 0;" >
                          <div class="nav" v-for="(item2,index2) in item.list" :key="index2" v-if="item2.kaiguan">
                            <div class="flexcc" v-if="item2.img"><img :src="item2.img"/></div>
                            <div class="flexcc" v-if="!item2.img"><img src="../assets/img/fengjing.jpg"/></div>
                            <div v-if="item2.name" style="font-size: 12px;">{{item2.name}}</div>
                          </div>
                        </div>
                      </div>
                        
                      <div v-if="item.type == 5" @click="bianji(item,index,$event)" :ref="'li'+index">
                        <div class="tab_ipt">
                        <img src="https://file.91haoka.cn/test-img/1727060886518.png "/>
                        </div>
                        <div class="flex" v-if="item.radio == 1">
                          <div class="yige flex" v-for="(item2,index2) in item.list" :key="index2" style="background:white">
                            <img src="https://file.91haoka.cn/test-img/1727061838205.png"/>
                            <!-- <div class="shopliimg"><img :src="item2.img"/>
                            </div>
                            <div class="shopliname">
                              <div style="line-height: 20px;">{{item2.name}}</div>
                              <div class="flexbc">
                              <div class="notes_adress">
                                 仅限广东地区，其他地区不发货
                              </div>
                               <div class="package_detail"> 
                              <div class="package_detail_item">
                                 <div>158G</div>
                                 <div>通用流量</div>
                              </div>
                                <div class="package_detail_item">
                                 <div>30G</div>
                                 <div>定向流量</div>
                              </div>
                                <div class="package_detail_item">
                                 <div>0.1元/分钟</div>
                                 <div>通话时长</div>
                              </div>
                              </div>
                              </div>
                            </div>
                              <div class="condition_flex">
                              <div style="color: #E90010;font-weight:bold">￥150</div>
                              <div style="color: #E90010;font-size:12px">办理年龄:18-65周岁</div>
                              <div class="share_btn">分享</div>
                             </div>   -->
                          </div>
             
                        </div>
                        <div class="flexb" v-if="item.radio == 2">
                          <div class="liangge" v-for="(item2,index2) in item.list" :key="index2">
                            <div class="shopliimg"><img :src="item2.img"/></div>
                            <div class="shopliname">
                              <div style="line-height: 20px;">{{item2.name}}</div>
                              <div style="color: #E90010;">￥1.99</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-if="item.type == 6" @click="bianji(item,index,$event)" :ref="'li'+index" >
                        <div class="flex" style="justify-content: space-around; padding-top: 5px;">
                          <div class="nav" v-for="(item2,index2) in item.list" v-if="item2.iconSwitch" :key="index2">
                            <div class="flexcc" v-if="item2.img"><img :src="item2.img" style="width: 18px; height: 18px; margin-bottom: 5px; display: block;"></img></div>
                            <div class="flexcc" v-if="!item2.img"><img src="../assets/img/fengjing.jpg"  style="width: 18px; height: 18px; margin-bottom: 5px; display: block;"></img></div>
                            <div v-if="item2.name" style="font-size: 12px; color: rgb(188, 188, 188);">{{item2.name}}</div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>


                </div>
                <div class="shunxu" v-if="bianjiindex != null" :style="{top:bianjitop+'px'}">
                  <div>
                    <div><img src="https://static.91haoka.cn/gantanhao/shang.png" @click="shang()"></div>
                    <div><img src="https://static.91haoka.cn/gantanhao/xia.png" @click="xia()"></div>
                    <div><img src="https://static.91haoka.cn/gantanhao/shanchu.png" @click="shan()" v-if="bianjitype == 1 || bianjitype == 2 || bianjitype == 3 || bianjitype == 4 || bianjitype == 6"></div>
                  </div>

                </div>

              </div>
            </div>



          </div>
          <!-- <div class="flex" style="margin: 20px 0;">
            <el-button type="primary" @click="add(1)">添加图片模块</el-button>
            <el-button type="primary" @click="add(2)">添加文字模块</el-button>
            <el-button type="primary" @click="add(3)">添加轮播图模块</el-button>
          </div> -->
          <!-- 模板2 -->         
          <div style="width: 400px; position: absolute; right:0; top:0; background:#EFF1F8; height:100%;
              overflow: auto;" v-if="bianjitype != null && moban == 2">
              <div class="flex" >
                <div class="fright" style="margin-left:0;">
                  <div v-if="bianjitype == 1">
                    <!-- <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">编辑图片:</div> -->
                    <div class="flexc" style="margin-bottom: 20px;">
                      <div class="z">上传图片:</div>
                      <div class="r" style="position: relative;margin-left:20px;margin-top:10px">
                        <chuantu ref="chuantu" @getimg="getimg" :widths="'365px'" :heights="'130px'" v-if="relo" :imgs="list[bianjiindex].img"></chuantu>
                      </div>
                      <div style="margin-left:20px; margin-left: 120px; margin-top: 20px;" v-if="relo">
                        <div style="font-size: 14px; color:#999; ">广告图尺寸为1920*682</div>
                        <!-- <div style="font-size: 14px; color:#999; ">2.上传格式：jpg/jpeg/png</div> -->
                      </div>
                    </div>
                     <div class="flexc" style="margin-bottom: 20px; ">
                       <div class="z">跳转链接:</div>
                       <div class="r">
                         <el-input v-model="list[bianjiindex].url" placeholder="请输入跳转链接"></el-input>
                       </div>
                     </div>

                  </div>

                  <div v-if="bianjitype == 2">
                     <div class="flexc" style="margin-bottom: 20px;">
                       <div class="z">编辑文字:</div>
                       <div class="r" style="width: 300px;margin:10px 0 0 40px;">
                         <el-input v-model="list[bianjiindex].text" :rows="4" type="textarea" placeholder="请输入文字介绍"></el-input>
                       </div>
                     </div>
                  </div>

                  <div v-if="bianjitype == 3" >

                    <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">banner设置:</div>
                    <el-button type="primary" @click="add2()" style="margin-left: 20px; margin-bottom:20px;border-radius:12px;background:#005AFF" :disabled="list[bianjiindex].list && list[bianjiindex].list.length >= 5">增加一张</el-button>
                    <div v-for="(item,index) in list[bianjiindex].list" :key="index" style="margin-bottom: 20px;">
                      <div class="flexc" style="margin-bottom: 20px;">
                        <div class="z">图片{{index+1}}:</div>
                        <div class="r" style="position: relative;" >
                          <chuantu ref="chuantu2" @getimg="getimg2($event,index)" :widths="'365px'" :heights="'130px'"  :shows="true" v-if="relo" :imgs="item.img" style="margin-left:30px;margin-top:10px"></chuantu>
                        </div>
                      </div>
                       <div class="flexc" style="margin-bottom: 20px;">
                         <div class="z">跳转链接:</div>
                         <div class="r" style="margin-left:30px;margin-top:10px">
                           <el-input v-model="item.url" style="width: 365px;" placeholder="请输入跳转链接"></el-input>
                         </div>
                       </div>
                    </div>
                    <div style="padding: 0 20px;">

                      <div style="font-size: 14px; color:#999; margin-bottom:20px;">1.建议尺寸：730x260像素，尺寸不匹配时，图片将被压缩或拉 伸以铺满画面，多张照片将会轮播形式展示</div>
                      <div style="font-size: 14px; color:#999; margin-bottom:20px;">2.上传格式：jpg/jpeg/png</div>
                    </div>
                  </div>

                  <div v-if="bianjitype == 4">
                     <div style="margin-bottom: 20px;">
                       <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">菜单设置:</div>
                       <div class="r">
                          <!-- <el-button type="danger" size="medium" @click="add3()" style="margin-left: 30px;border-radius:12px;background:#F72C50">添加菜单</el-button> -->
                          <div class="flex" style="padding: 0 30px;">
                            <div v-for="(item,index) in list[bianjiindex].list" :key="index" style="text-align: center; margin:20px 8px; width:50px;">
                              <div style="padding: 2px;  border:1px #fff dashed;" :class="bianjicaidan == index?'actcaidan':''">
                                <img v-if="item.img" :src="item.img" style="width: 48px; height:48px;" @click="bianjicaidan = index">
                                <i v-if="!item.img" @click="bianjicaidan = index" class="el-icon-plus avatar-uploader-icon" style="width: 60px; line-height: 60px; height:60px; border:1px #eaeaea dashed;"></i>
                              </div>
                              <el-switch v-model="item.kaiguan" @change="kaiguanChange($event,item)" active-color="#2974FF" inactive-color="#CCCCCC" style="margin-top:10px"></el-switch>
                              <div style="margin: 10px 0; font-size: 12px; color:#999;">{{item.name}}</div>
                              <!-- <div style="margin: 10px 0; font-size: 12px; color:#999;" v-if="index > 2" @click="shanchu(index)">删除</div> -->
                            </div>
                          </div>
                         <div class="flexc" v-for="(item,index) in list[bianjiindex].list">
                           <!-- <div class="z">菜单{{index+1}}:</div> -->
                           <div class="r" style="padding-left: 30px;" v-if="bianjicaidan == index">
                             <div style="margin: 20px 0 10px;">更改图标：</div>
                             <chuantu ref="chuantu2" :widths="'100px'" :heights="'100px'" @getimg="getimg3($event,index)"></chuantu>
                             <div style="margin: 20px 0 10px;">菜单名称：</div>
                             <el-input style="margin: 10px 0;" v-model="list[bianjiindex].list[index].name" placeholder="请输入菜单名称"></el-input>
                             <div style="margin: 20px 0 10px;">关联页面：</div>
                             <div style="margin-top:10px;">
                               <el-radio-group v-model="item.dizhi">
                                   <el-radio :label="1">自定义</el-radio>
                                   <el-radio :label="2">联系客服</el-radio>
                                   <el-radio :label="3">查看订单</el-radio>
                                   <el-radio :label="8" style="margin-top:10px">常见问题</el-radio>
                               </el-radio-group>
                             </div>
                             <div style="margin-top:10px;"><el-input v-if="item.dizhi == 1" v-model="item.url" placeholder="请输入链接"></el-input></div>
                           </div>
                         </div>
                       </div>
                     </div>
                  </div>

                  <div v-if="bianjitype == 5">
                     <div class="flexc" style="margin-bottom: 20px;">
                       <div class="z">分栏:</div>
                       <div class="r">
                          <el-radio v-model="list[bianjiindex].radio" label="1">一排一个</el-radio>
                          <el-radio v-model="list[bianjiindex].radio" label="2">一排俩</el-radio>
                       </div>
                     </div>
                  </div>
                  <div v-if="bianjitype == 6">
                     <div style="margin-bottom: 20px;">
                       <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">菜单设置:</div>
                       <div class="r">
                          <el-button type="danger" size="medium" @click="add3()" style="margin-left: 30px;background:#F72C50;border-radius:12px">添加菜单</el-button>
                          <div class="flex" style="padding: 0 30px;">
                            <div v-for="(item,index) in list[bianjiindex].list" :key="index" style="text-align: center; margin:20px 8px; width:50px;">
                              <div style="padding: 2px;  border:1px #fff dashed;" :class="bianjicaidan == index?'actcaidan':''">
                                <img v-if="item.img" :src="item.img" style="width: 60px; height:60px;" @click="bianjicaidan = index">
                                <i v-if="!item.img" @click="bianjicaidan = index" class="el-icon-plus avatar-uploader-icon" style="width: 60px; line-height: 60px; height:60px; border:1px #eaeaea dashed;"></i>
                              </div>
                              <div style="margin: 10px 0; font-size: 12px; color:#999;">{{item.name}}</div>
                              <div style="margin: 10px 0; font-size: 12px; color:#999;" v-if="index > 2" @click="shanchu(index)">删除</div>
                            </div>
                          </div>
                         <div class="flexc" v-for="(item,index) in list[bianjiindex].list">
                           <!-- <div class="z">菜单{{index+1}}:</div> -->
                           <div class="r" style="padding-left: 30px;" v-if="bianjicaidan == index">
                             <div style="margin: 20px 0 10px;">更改图标：</div>
                             <chuantu ref="chuantu2" :widths="'100px'" :heights="'100px'" @getimg="getimg3($event,index)"></chuantu>
                             <div style="margin: 20px 0 10px;">菜单名称：</div>
                             <el-input style="margin: 10px 0;" v-model="list[bianjiindex].list[index].name" placeholder="请输入菜单名称"></el-input>
                             <div style="margin: 20px 0 10px;">关联页面：</div>
                             <div style="margin-top:10px;">
                               <el-radio-group v-model="item.dizhi">
                                   <el-radio :label="7">自定义</el-radio>
                                   <el-radio :label="2">在线客服</el-radio>
                                   <el-radio :label="3">查询订单</el-radio>
                                   <el-radio :label="4" style="margin-top:10px">分享店铺</el-radio>
                                   <el-radio :label="1" style="margin-top:10px">号卡查询</el-radio>
                                 </el-radio-group>
                             </div>
                             <div style="margin-top:10px;"><el-input v-if="item.dizhi == 7" v-model="item.url" placeholder="请输入链接"></el-input></div>
                           </div>


                         </div>
                       </div>
                     </div>
                  </div>
                   
                </div>
              </div>
          </div>
          <!-- 模板1 -->
          <div style="width: 400px; position: absolute; right:0; top:0; background:#EFF1F8; height:100%;
              overflow: auto;" v-if="bianjitype != null && moban == 1">
              <div class="flex" >
                <div class="fright" style="margin-left:0;">
                  <div v-if="bianjitype == 1">
                    <!-- <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">编辑图片:</div> -->
                    <div class="flexc" style="margin-bottom: 20px;">
                      <div class="z">上传图片:</div>
                      <div class="r" style="position: relative;margin-left:20px;margin-top:10px">
                        <chuantu ref="chuantu" @getimg="getimg" :widths="'365px'" :heights="'130px'" v-if="relo" :imgs="list[bianjiindex].img"></chuantu>
                      </div>
                      <div style="margin-left:20px; margin-left: 120px; margin-top: 20px;" v-if="relo">
                        <div style="font-size: 14px; color:#999; ">广告图尺寸为1920*682</div>
                        <!-- <div style="font-size: 14px; color:#999; ">2.上传格式：jpg/jpeg/png</div> -->
                      </div>
                    </div>
                     <div class="flexc" style="margin-bottom: 20px; ">
                       <div class="z">跳转链接:</div>
                       <div class="r">
                         <el-input v-model="list[bianjiindex].url" placeholder="请输入跳转链接"></el-input>
                       </div>
                     </div>

                  </div>

                  <div v-if="bianjitype == 2">
                     <div class="flexc" style="margin-bottom: 20px;">
                       <div class="z">编辑文字:</div>
                       <div class="r" style="width: 300px;margin:10px 0 0 40px;">
                         <el-input v-model="list[bianjiindex].text" :rows="4" type="textarea" placeholder="请输入文字介绍"></el-input>
                       </div>
                     </div>
                  </div>

                  <div v-if="bianjitype == 3" >

                    <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">banner设置:</div>
                    <el-button type="primary" @click="add2()" style="margin-left: 20px; margin-bottom:20px;border-radius:12px;background:#005AFF" :disabled="list[bianjiindex].list && list[bianjiindex].list.length >= 5">增加一张</el-button>
                    <div v-for="(item,index) in list[bianjiindex].list" :key="index" style="margin-bottom: 20px;">
                      <div class="flexc" style="margin-bottom: 20px;">
                        <div class="z">图片{{index+1}}:</div>
                        <div class="r" style="position: relative;" >
                          <chuantu ref="chuantu2" @getimg="getimg2($event,index)" :widths="'365px'" :heights="'130px'"  :shows="true" v-if="relo" :imgs="item.img" style="margin-left:30px;margin-top:10px"></chuantu>
                        </div>
                      </div>
                       <div class="flexc" style="margin-bottom: 20px;">
                         <div class="z">跳转链接:</div>
                         <div class="r" style="margin-left:30px;margin-top:10px">
                           <el-input v-model="item.url" style="width: 365px;" placeholder="请输入跳转链接"></el-input>
                         </div>
                       </div>
                    </div>
                    <div style="padding: 0 20px;">

                      <div style="font-size: 14px; color:#999; margin-bottom:20px;">1.建议尺寸：730x260像素，尺寸不匹配时，图片将被压缩或拉 伸以铺满画面，多张照片将会轮播形式展示</div>
                      <div style="font-size: 14px; color:#999; margin-bottom:20px;">2.上传格式：jpg/jpeg/png</div>
                    </div>
                  </div>

                  <div v-if="bianjitype == 4">
                     <div style="margin-bottom: 20px;">
                       <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">菜单设置:</div>
                       <div class="r">
                          <!-- <el-button type="danger" size="medium" @click="add3()" style="margin-left: 30px;border-radius:12px;background:#F72C50">添加菜单</el-button> -->
                          <div class="flex" style="padding: 0 30px;">
                            <div v-for="(item,index) in list[bianjiindex].list" :key="index" style="text-align: center; margin:20px 10px; width:48px;">
                              <div style="padding: 2px;  border:1px #fff dashed;" :class="bianjicaidan == index?'actcaidan':''">
                                <img v-if="item.img" :src="item.img" style="width: 48px; height:48px;" @click="bianjicaidan = index">
                                <i v-if="!item.img" @click="bianjicaidan = index" class="el-icon-plus avatar-uploader-icon" style="width: 48px; line-height: 48px; height:60px; border:1px #eaeaea dashed;"></i>
                              </div>
                              <el-switch v-model="item.kaiguan" @change="kaiguanChange($event,item)" active-color="#2974FF" inactive-color="#CCCCCC" style="margin-top:10px"></el-switch>
                              <div style="margin: 10px 0; font-size: 12px; color:#999;">{{item.name}}</div>
                              <!-- <div style="margin: 10px 0; font-size: 12px; color:#999;" v-if="index > 2" @click="shanchu(index)">删除</div> -->
                            </div>
                          </div>
                         <div class="flexc" v-for="(item,index) in list[bianjiindex].list">
                           <!-- <div class="z">菜单{{index+1}}:</div> -->
                           <div class="r" style="padding-left: 30px;" v-if="bianjicaidan == index">
                             <div style="margin: 20px 0 10px;">更改图标：</div>
                             <chuantu ref="chuantu2" :widths="'100px'" :heights="'100px'" @getimg="getimg3($event,index)"></chuantu>
                             <div style="margin: 20px 0 10px;">菜单名称：</div>
                             <el-input style="margin: 10px 0;" v-model="list[bianjiindex].list[index].name" placeholder="请输入菜单名称"></el-input>
                             <div style="margin: 20px 0 10px;">关联页面：</div>
                             <div style="margin-top:10px;">
                               <el-radio-group v-model="item.dizhi" style="margin-top:5px">
                                   <el-radio :label="7">自定义</el-radio>
                                   <el-radio :label="2">在线客服</el-radio>
                                   <el-radio :label="3">订单查询</el-radio>
                                   <el-radio :label="4" style="margin-top:10px">分享店铺</el-radio>
                                   <el-radio :label="1" style="margin-top:10px">号卡查询</el-radio>
                                   <el-radio :label="8" style="margin-top:10px">常见问题</el-radio>
                                 </el-radio-group>
                             </div>
                             <div style="margin-top:10px;"><el-input v-if="item.dizhi == 7" v-model="item.url" placeholder="请输入链接"></el-input></div>
                           </div>
                         </div>
                       </div>
                     </div>
                  </div>

                  <div v-if="bianjitype == 5">
                     <div class="flexc" style="margin-bottom: 20px;">
                       <!-- <div class="z">分栏:</div>
                       <div class="r">
                          <el-radio v-model="list[bianjiindex].radio" label="1">一排一个</el-radio>
                          <el-radio v-model="list[bianjiindex].radio" label="2">一排俩</el-radio>
                       </div> -->
                       <div class="class_show">
                        分类展示
                        <span class="class_show_span" @click="assortClick">管理分类>></span>
                        <div class="defalt_belong">
                        默认归属地
                          <el-radio-group v-model="radioBelong" @change="radioBelongClick"  style="margin-left:20px">
                           <el-radio :label="1">全国</el-radio>
                           <el-radio :label="2">定位所在城市</el-radio>
                          </el-radio-group>
                       </div>
                       </div>

                     </div>
                  </div>
                  <div v-if="bianjitype == 6">
                     <div style="margin-bottom: 20px;">
                       <!-- <div style="font-weight: bold; font-size: 16px;margin-left:30px;">点击</div>                        -->
                       <div class="r">
                          <!-- <el-button type="danger" size="medium" @click="add3()" style="margin-left: 30px;background:#F72C50;border-radius:12px">添加菜单</el-button> -->
                          <!-- <div class="flex" style="padding: 0 30px;">
                            <div v-for="(item,index) in list[bianjiindex].list" :key="index" style="text-align: center; margin:20px 10px;cursor:pointer">
                              <div style="border:1px #fff dashed;" :class="bianjicaidan == index?'actcaidan':''">
                                <img v-if="item.img" :src="item.img" style="width: 40px; height:40px;" @click="bianjicaidan = index" />
                                <i v-if="!item.img" @click="bianjicaidan = index" class="el-icon-plus avatar-uploader-icon" style="width: 40px; line-height: 40px; height:40px; border:1px #eaeaea dashed;"></i>
                              </div>
                              <div style="margin: 10px 0; font-size: 12px; color:#2974FF;">{{item.name}}</div>
                              
                            </div>
                          </div> -->
                              <!-- <div style="margin: 10px 0; font-size: 12px; color:#999;" v-if="index > 2" @click="shanchu(index)">删除</div> -->

                       <div style="font-weight: bold; font-size: 16px;margin-left:30px;">图标配置</div>
                              <div class="flex" style="padding: 0 30px;">
                            <div v-for="(item,index) in list[bianjiindex].list" :key="index" style="text-align: center; margin:20px 10px;cursor:pointer">
                              <div style="border:1px #fff dashed;" :class="bianjicaidan == index?'actcaidan':''">
                                <img v-if="item.img" :src="item.img" style="width: 40px; height:40px;" @click="bianjicaidan = index" />
                                <i v-if="!item.img" @click="bianjicaidan = index" class="el-icon-plus avatar-uploader-icon" style="width: 40px; line-height: 40px; height:40px; border:1px #eaeaea dashed;"></i>
                              </div>
                              <div style="margin: 10px 0; font-size: 12px; color:#7987A2;">{{item.name}}</div>
                              <el-switch v-model="item.iconSwitch" active-color="#2974FF" inactive-color="#CCCCCC" style="margin-top:10px"></el-switch>
                              
                            </div>
                          </div>
                         <div class="flexc" v-for="(item,index) in list[bianjiindex].list">
                           <!-- <div class="z">菜单{{index+1}}:</div> -->
                           <div class="r" style="padding-left: 30px;" v-if="bianjicaidan == index">
                             <!-- <div style="margin: 20px 0 10px;">更改图标：</div>
                              <div class="flex">
                            <div> <chuantu ref="chuantu2" :widths="'100px'" :heights="'100px'" @getimg="getimg3($event,index)"></chuantu>
                            
                            <div style="color:#AFB3BC;text-align: center;">点击</div>
                            </div>
                             
                             <div>
                                <chuantu style="margin-left:50px" ref="chuantu2" :widths="'100px'" :heights="'100px'" @getimg="getimg4($event,index)"></chuantu>
                                <div style="color:#AFB3BC;text-align: center;margin-left:50px">未点击</div>
                              </div>

                               </div> -->

                             <div style="margin: 20px 0 10px;">菜单名称：</div>
                             <el-input style="margin: 10px 0;" v-model="list[bianjiindex].list[index].name" placeholder="请输入菜单名称"></el-input>
                             <div style="margin: 20px 0 10px;">关联页面：</div>
                             <div style="margin-top:10px;">
                               <el-radio-group v-model="item.dizhi">
                                   <el-radio :label="6">首页</el-radio>
                                   <!-- <el-radio :label="4">自定义</el-radio> -->
                                   <el-radio :label="2">联系客服</el-radio>
                                   <el-radio :label="3">查看订单</el-radio>
                                   <el-radio :label="5" style="margin-top:10px">分享店铺</el-radio>
                                   <el-radio :label="1" style="margin-top:10px">号卡查询</el-radio>
                                 </el-radio-group>
                             </div>
                             <div style="margin-top:10px;"><el-input v-if="item.dizhi == 6" v-model="item.url" placeholder="请输入链接"></el-input></div>
                           </div>
                         </div>
                       </div>
                     </div>
                  </div>
                   
                </div>
              </div>
          </div>

        </div>

      </div>
    </div>
    <mobanxuanze @mobanxuanze="mobanxuanze" v-if="mobanlog" :moban2="moban" ref="mobanxuanze"></mobanxuanze>
  </div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../components/chuantu.vue";
  import mobanxuanze from "./meitituiguanglog/mobanxuanze.vue";
  export default {
    components: {
      top,
      left,
      chuantu,
      mobanxuanze
    },
      props: {
    hide: false
  },
    name: "zhiboxiaoshou_fabu2",
    data() {
      return {
        radioBelong:1,
        shareSwitch:false,
        bianjicaidan:0,

        list: [

        ],
        tongbuall: "",
        log: false,

        input: "",
        all: {
          erweima: ""
        },
        all2: {
          erweima: ""
        },
        bianjiindex:null,
        bianjitype:null,
        bianjitop:-9999,

        relo:false,
        moban:1,
        mobanlog:false
      }
    },
    computed:{
      youdima(){
        if(this.list.filter(item=>item.type == 6).length > 0){
          return {
              padding: "0 0 35px 0"
          }
        }
      }
    },
    created() {
      // console.log(this.list.includes(item=>item.type == 4))
      // 现在path 支持store和page 分别是存直播间和商品页的目录

      let wenjianjia = 'web-store'
      if(process.env.NODE_ENV === 'development'){
        // wenjianjia = 'test-web-store'
      }
      if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
        wenjianjia = 'web-store'
      }
      if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
        wenjianjia = 'test-web-store'
      }
      if(window.location.href.includes('localhost')){
        wenjianjia = 'test-web-store'
      }
      if(this.$route.query.id){
        axios.get(`https://file.91haoka.cn/${wenjianjia}/${this.$route.query.id}.json?v=${Math.random()}`)
        .then(response => {
          if(response.data){
            this.list = JSON.parse(response.data)
            console.log('this.list',this.list)
           this.onList()
          }else{

          }
        })
        .catch(err =>{
          if(this.list.findIndex(item=>item.type == 4) == -1){
            this.list.push(
              {
                type:4,
                list:[
                  {img:"https://file.91haoka.cn/test-img/1728358653434.png",name:"号卡查询",kaiguan:true,dizhi:1,url:"queryCard.html"},
                  {img:"https://file.91haoka.cn/test-img/1727054776591.png",name:"在线客服",kaiguan:true,dizhi:2,url:"kefu.html"},
                  {img:"https://file.91haoka.cn/test-img/1728347976399.png",name:"订单查询",kaiguan:true,dizhi:3,url:"chadan.html"},
                  {img:"https://file.91haoka.cn/test-img/1727316200087.png",name:"分享店铺",kaiguan:true,dizhi:4,url:"share.html"},
                  {img:"https://file.91haoka.cn/test-img/1735260544733.png",name:"常见问题",kaiguan:true,dizhi:8,url:"commonProblem.html"},
                  {img:"https://file.91haoka.cn/test-img/1727055062178.png",name:"更多",dizhi:7,url:""},
                ]
              }
            )
          }
          if(this.list.findIndex(item=>item.type == 7) == -1){
            this.list.push(
              {
                type:7,
                moban:this.moban
              }
            )
          }
          if(this.list.findIndex(item=>item.type == 5) == -1){
            this.list.push(
              {
                type:5,
                list:[
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp2.jpg",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp3.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp4.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp5.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp.png",name:"标题实例"},
                ],
                radio:"1"
              }
            )
          }
        })
      }else{
        if(this.list.findIndex(item=>item.type == 4) == -1){
            this.list.push(
              {
                type:4,
                list:[
                  {img:"https://file.91haoka.cn/test-img/1728358653434.png",name:"号卡查询",kaiguan:true,dizhi:1,url:"queryCard.html"},
                  {img:"https://file.91haoka.cn/test-img/1727054776591.png",name:"在线客服",kaiguan:true,dizhi:2,url:"kefu.html"},
                  {img:"https://file.91haoka.cn/test-img/1728347976399.png",name:"订单查询",kaiguan:true,dizhi:3,url:"chadan.html"},
                  {img:"https://file.91haoka.cn/test-img/1727316200087.png",name:"分享店铺",kaiguan:true,dizhi:4,url:"share.html"},
                  {img:"https://file.91haoka.cn/test-img/1727055062178.png",name:"更多",dizhi:7,url:""},
                ]
              }
            )
          }
          if(this.list.findIndex(item=>item.type == 7) == -1){
            this.list.push(
              {
                type:7,
                moban:this.moban
              }
            )
          }
          if(this.list.findIndex(item=>item.type == 5) == -1){
            this.list.push(
              {
                type:5,
                list:[
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp2.jpg",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp3.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp4.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp5.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp.png",name:"标题实例"},
                ],
                radio:"1"
              }
            )
          }
      }

    },
    mounted() {
     
    },
    methods: {
      kaiguanChange(e,item){
        let index=this.list[this.bianjiindex].list.filter(item=>item.kaiguan).length
        if(e){
          if(index<=5){
            item.kaiguan=e
          }else{
            item.kaiguan=false
            this.$message({
              message: '最多只能开启5个',
              type: 'warning'
            })
          }
        }else{
          item.kaiguan=e
        }
      },
      assortClick(){
        this.$router.push("/zhiboxitong/fenleiguanli");
      },
      onList(){
                    if(this.list.findIndex(item=>item.type == 7) == -1){
              this.list.push(
                {
                  type:7,
                  moban:this.moban
                }
              )
            }else{
              this.list.forEach(item=>{
                if(item.type == 7){
                   this.moban=item.moban
                }
              })
             
            }
            if(this.list.findIndex(item=>item.type == 4) == -1){
              this.list.push(
                {
                type:4,
                list:[
                  {img:"https://file.91haoka.cn/test-img/1728358653434.png",name:"号卡查询",kaiguan:true,dizhi:1,url:"queryCard.html"},
                  {img:"https://file.91haoka.cn/test-img/1727054776591.png",name:"在线客服",kaiguan:true,dizhi:2,url:"kefu.html"},
                  {img:"https://file.91haoka.cn/test-img/1728347976399.png",name:"订单查询",kaiguan:true,dizhi:3,url:"chadan.html"},
                  {img:"https://file.91haoka.cn/test-img/1727316200087.png",name:"分享店铺",kaiguan:true,dizhi:4,url:"share.html"},
                  {img:"https://file.91haoka.cn/test-img/1735260544733.png",name:"常见问题",kaiguan:false,dizhi:8,url:"commonProblem.html"},
                  {img:"https://file.91haoka.cn/test-img/1727055062178.png",name:"更多",dizhi:7,url:""},
                ]
              })
            }else{
              console.log('this.list4',this.list)
               let obj=this.list.find(item=>item.type == 4)
               let caidanList=[
                  {img:"https://file.91haoka.cn/test-img/1728358653434.png",name:"号卡查询",kaiguan:true,dizhi:1,url:"queryCard.html"},
                  {img:"https://file.91haoka.cn/test-img/1727054776591.png",name:"在线客服",kaiguan:true,dizhi:2,url:"kefu.html"},
                  {img:"https://file.91haoka.cn/test-img/1728347976399.png",name:"订单查询",kaiguan:true,dizhi:3,url:"chadan.html"},
                  {img:"https://file.91haoka.cn/test-img/1727316200087.png",name:"分享店铺",kaiguan:true,dizhi:4,url:"share.html"},
                  {img:"https://file.91haoka.cn/test-img/1735260544733.png",name:"常见问题",kaiguan:false,dizhi:8,url:"commonProblem.html"},
                  {img:"https://file.91haoka.cn/test-img/1727055062178.png",name:"更多",dizhi:7,url:""},
                ].map(item=>{
                  if(obj.list.findIndex(i=>i.name==item.name)==-1){
                    return item
                  }else{
                    return obj.list.find(i=>i.name==item.name)
                  }
                })
                              console.log('caidanList',caidanList)

 this.list= this.list.map(item=>{
  if(item.type == 4){
    return {...item,list:caidanList}
  }
  return item
 })
console.log('this.list5=',this.list)
            }
            if(this.list.findIndex(item=>item.type == 8) == -1){
              this.shareSwitch=false
            }else{
              this.list.forEach(item=>{
                if(item.type == 8){
                  this.shareSwitch=item.shareSwitch
                }
              })
            }
             if(this.list.findIndex(item=>item.type == 9) == -1){
               this.list.push(
                {
                  type:9,
                  radioBelong:this.radioBelong
                }
              )
            }else{
              this.list.forEach(item=>{
                if(item.type == 9){
                  this.radioBelong=item.radioBelong
                }
              })
            }      },
            radioBelongClick(){
              this.list.forEach(item=>{
                if(item.type == 9){
                  item.radioBelong=this.radioBelong
                }
              })
            },
      onChange(e){
        console.log(e);
        // this.onList()
         this.list.forEach(item=>{
                if(item.type == 7){
                   item.moban=this.moban
                }
              })
      },
      mobanshow:function(){
        this.mobanlog = true
        this.$nextTick(()=>{
          this.$refs.mobanxuanze.log = true
        })
      },
      mobanxuanze:function(val){
        this.list.forEach(item => {
          if(item.type == 7){
            item.moban = val
          }
        })
        this.mobanlog = false
      },
      shanchu:function(index){
        this.list[this.bianjiindex].list.splice(index,1)
      },
      add3:function(){
        if(this.list[this.bianjiindex].list.length < 5){
          this.list[this.bianjiindex].list.push(
            {img:"https://static.91haoka.cn/gantanhao/dh3.png",name:"名称",dizhi:1,url:""},
          )
        }
      },

      xia:function(){

        let arr = this.list
        let index1 = this.bianjiindex
        let index2 = this.bianjiindex + 1

        if(index2 < arr.length){
          [arr[index1] , arr[index2]]  = [arr[index2] , arr[index1]]
          this.bianjiindex = index2
        }
      },
      shang:function(){
        let arr = this.list
        let index1 = this.bianjiindex
        let index2 = this.bianjiindex - 1
        if(index2 >= 0){
          [arr[index1] , arr[index2]]  = [arr[index2] , arr[index1]]
          this.bianjiindex = index2
        }
      },
      shan:function(){

        // console.log(this.bianjitype)
        // console.log(this.list[this.bianjiindex])
        // if(this.bianjitype == 4){
        //   this.list[this.bianjiindex].list = [
        //       {img:"https://static.91haoka.cn/gantanhao%2Fdh1.png",name:"号卡列表",dizhi:1,url:""},
        //       {img:"https://static.91haoka.cn/gantanhao%2Fdh4.png",name:"联系客服",dizhi:2,url:"kefu.html"},
        //       {img:"https://static.91haoka.cn/gantanhao%2Fdh5.png",name:"订单查询",dizhi:3,url:"dingdan.html"},
        //     ]
        // }else{
        //   this.list.splice(this.bianjiindex,1)
        //   this.bianjitype = this.list[this.bianjiindex].type
        // }
        this.list.splice(this.bianjiindex,1)
        this.bianjitype = this.list[this.bianjiindex].type
      },

      bianji:function(item,index,e){

        // this.$refs.chuantu.img = item.img
        this.bianjiindex = index
        this.bianjitype = item.type
        // this.bianjitop = e.target.offsetTop
        // console.log(e)
        // console.log(this.bianjitop)


        if(item.type == 1 && this.list[this.bianjiindex].img != undefined){
          // this.$nextTick(()=>{
          //   this.$refs.chuantu.img = this.list[this.bianjiindex].img
          // })
        }
        if(item.type == 2){

        }
        if(item.type == 3){
          this.$nextTick(()=>{
            this.list[this.bianjiindex].list.forEach((item2,index2)=>{
              this.$refs.chuantu2[index2].img = item2.img
            })
          })
        }

        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      bianji2:function(item,index){

        // this.$refs.chuantu.img = item.img
        this.bianjiindex = index
        this.bianjitype = item.type



        this.$nextTick(()=>{
          this.list[this.bianjiindex].list.forEach((item2,index2)=>{
            console.log(item2)
            this.$refs.chuantu2[index2].img = item2.img
          })
        })
      },
      add2:function(){
        if(this.list[this.bianjiindex].list.length < 5){
          this.list[this.bianjiindex].list.push(
            {img:"",url:""}
          )
        }
      },
      add:function(type){
        if(type == 1){
          this.list.unshift(
            {type:1,img:"",url:""}
          )
        }

        if(type == 2){
          this.list.unshift(
            {type:2,text:""}
          )
        }

        if(type == 3){
          this.list.unshift(
            {
              type:3,list:[
                {img:"",url:""}
              ],
            }
          )
          this.relo = false
          this.$nextTick(()=>{
            this.relo = true
          })
        }
        if(type == 4){
        		  this.list.unshift(
        		    {type:4,list:[
        		      // {img:"https://static.91haoka.cn/gantanhao%2Fdh1.png",name:"号卡查询",dizhi:1,url:""},
        		      // {img:"https://static.91haoka.cn/gantanhao%2Fdh4.png",name:"联系客服",dizhi:2,url:"kefu.html"},
        		      // {img:"https://static.91haoka.cn/gantanhao%2Fdh5.png",name:"订单查询",dizhi:3,url:"dingdan.html"},
                  {img:"https://file.91haoka.cn/test-img/1728358653434.png",name:"号卡查询",kaiguan:true,dizhi:1,url:"queryCard.html"},
                  {img:"https://file.91haoka.cn/test-img/1727054776591.png",name:"在线客服",kaiguan:true,dizhi:2,url:"kefu.html"},
                  {img:"https://file.91haoka.cn/test-img/1728347976399.png",name:"订单查询",kaiguan:true,dizhi:3,url:"chadan.html"},
                  {img:"https://file.91haoka.cn/test-img/1727316200087.png",name:"分享店铺",kaiguan:true,dizhi:4,url:"share.html"},
                  // https://file.91haoka.cn/test-img/1727316200087.png
                  {img:"https://file.91haoka.cn/test-img/1727055062178.png",name:"更多",dizhi:7,url:""},
        		    ]}
        		  )
        		}
        if(type == 6){
          //底部导航模块
        		  this.list.unshift(
        		    {type:6,list:[
        		      {img:"https://file.91haoka.cn/test-img/1727166552396.png",name:"首页",dizhi:6,url:"",iconSwitch:true},
        		      {img:"https://file.91haoka.cn/test-img/1727166318669.png",name:"号卡查询",dizhi:1,url:"queryCard.html",unImg:"",iconSwitch:true},
        		      {img:"https://file.91haoka.cn/test-img/1727074374958.png",name:"联系客服",dizhi:2,url:"kefu.html",unImg:"",iconSwitch:true},
        		      {img:"https://file.91haoka.cn/test-img/1728436596272.png",name:"订单查询",dizhi:3,url:"chadan.html",unImg:"",iconSwitch:true},
        		      {img:"https://file.91haoka.cn/test-img/1727319035117.png",name:"分享店铺",dizhi:5,url:"share.html",unImg:"",iconSwitch:true},
        		    ]}
        		  )
        		}
        this.bianjiindex = 0
        this.bianjitype = type
      },
      getimg: function(img) {
        this.list[this.bianjiindex].img = img
      },
      getimg2:function(img,index){
        // this.list[this.bianjiindex].list[index].img = img

        if(img == ''){
          this.list[this.bianjiindex].list.splice(index,1)
        }else{
          this.list[this.bianjiindex].list[index].img = img
        }
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      getimg3:function(img,index){
        console.log('this.bianjiindex',this.bianjiindex,index)
        this.list[this.bianjiindex].list[index].img = img

      },
      getimg4:function(img,index){
        this.list[this.bianjiindex].list[index].img = img

      },

      xiayibu:function(){

        var Obj2str = function(o) {
            if (o == undefined) {
                return "";
            }
            var r = [];
            if (typeof o == "string") return "\"" + o.replace(/([\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
            if (typeof o == "object") {
                if (!o.sort) {
                    for (var i in o)
                        r.push("\"" + i + "\":" + Obj2str(o[i]));
                    if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                        r.push("toString:" + o.toString.toString());
                    }
                    r = "{" + r.join() + "}"
                } else {
                    for (var i = 0; i < o.length; i++)
                        r.push(Obj2str(o[i]));
                    r = "[" + r.join() + "]";
                }
                return r;
            }
            return o.toString().replace(/\"\:/g, '":""');
        }


        let wenjianjia = 'web-store'
        if(process.env.NODE_ENV === 'development'){
          // wenjianjia = 'test-web-store'
        }
        if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
          wenjianjia = 'web-store'
        }
        if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
          wenjianjia = 'test-web-store'
        }
		if(window.location.href.includes('localhost')){
		  wenjianjia = 'test-web-store'
		}

        axios.post(`${this.apis}/api/qiniu/token`,{bucket:'gthshopstore',cloud:`${wenjianjia}/${this.$route.query.id}.json`})
          .then(response => {
            console.log('this',this)

            var that = this
            if(response.data.msg.code == 0){
              const observer = {
                next(res){

                },
                error(err){

                },
                complete(res){
                  console.log('this',that)
                  that.$message.success('保存成功');
                  that.$emit('tabCilck','two')
                  // that.go('/zhiboxitong/zhiboxiaoshou')
                }
              }
              let files = Obj2str(JSON.stringify(this.list))
              console.log('4444')
              console.log(this.list)
              let file = new File([files], `${wenjianjia}/${this.$route.query.id}.json`, {type: 'application/json'});
              const observable = qiniu.upload(file, file.name, response.data.data, {}, {})
              const subscription = observable.subscribe(observer) // 上传开始
            }else{
              this.$message.error(response.data.msg.info);
            }
          });

        // let all = {
        //       "id": this.$route.query.id,
        //       "type": "json",
        //       "path": "store",
        //       "data": JSON.stringify(this.list)
        // }

        // axios.post(`${this.apis}/api/page/json`,all)
        //   .then(response => {
        //     if(response.data.msg.code == 0){

        //       this.$message.success('发布成功');
        //       this.go('/zhiboxitong/zhiboxiaoshou')
        //     }else{
        //       this.$message.error(response.data.msg.info);
        //     }
        //   });
      },
      getxq:function(){
        axios.get(`${this.apis}/api/store/info?id=${this.$route.query.id}`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.all = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      }
    },
    watch:{
shareSwitch(val){
  if(!!this.list.find(item=>item.type==8)){

    this.list=this.list.map(item=>{
      if(item.type==8){
        return {...item,shareSwitch:val}
      }else{
        return item
      }
    })
  }else{
    this.list.push({
      type:8,
      shareSwitch:val,
    
    })
  }
}
    }
  }
</script>

<style scoped lang="less">
  .zhiboxiaoshou_fabu2 {
    // background: #f2f2f2;
    color: #333;
    // min-height: 100vh;
    img{ display: block;}
    /deep/ .el-breadcrumb {
      font-size: 16px;
    }

    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 0px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 0px;
    }

    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
      background: #eee;
    }

    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      border-radius: 10px;
      background: #fff;
    }

    * {
      box-sizing: border-box;
    }

    .zhiboxitong_content {
      height: calc(100vh - 90px);
      .left {
        width: 210px;
        background: #FAFAFE;
        height: 100%;

      }

      .ft{ font-size: 18px;margin-bottom: 30px;font-weight: bold;}
      .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
      .r{}

      .right {
        width: calc(100vw - 220px);
        height: 100vh;
        overflow: auto;
        .dibudaohang{ position: absolute; bottom: 0; left: 20px; width:260px !important; background: #fff;}
        .yincang{ display: none;}
        .zhiboxitong_right {
          // height: calc(100vh - 90px);
          // background: red;
          
        }
        .tianjiatit{margin-bottom: 30px; cursor: pointer; font-size: 14px; text-align:center; width: 140px;background: white;height: 40px;border-radius: 12px;line-height: 40px;}
        .shunxu{ padding: 50px 20px; border-radius: 5px;
          img{ width: 15px;margin-bottom: 10px; cursor: pointer;}
        }
        .actcaidan{ border: 1px #F56C6C dashed !important;}
        .fleft {
            width: 300px; height: 700px; background: url('https://static.91haoka.cn/gantanhao/shouji3.png');background-size: 300px 700px; padding: 50px 20px;
            position: relative;
            margin-top: 60px;
            margin-left: 240px;
          .li{
            width: 100%; padding: 2px;  border: 1px #eaeaea dashed; margin-bottom: 20px; cursor: pointer;
            img{ width: 100%; display: block;}
            .nav{ text-align: center;  flex: 1;
              img{ width: 34px; height:34px;border-radius: 3px;margin-bottom: 10px;}
            }
          }
          .shareClass{

            cursor: pointer;
            z-index: 999;
            background: white;
            height: 50px;
            border-radius: 18px 0 0 18px;
            width: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            border-radius: 50%;
            top:296px;
            right: 20px;
            box-shadow: 0 3px 9px #A5B3BF;
          }
          .bianjizhong{ border-color: #F56C6C;}
          .awu{ padding: 10px; font-size: 12px;color: #999;}

          // .yihang{ justify-content: space-between; padding: 5px;
          //   .shopli{width: 100%; margin-bottom: 10px;}
          // }
          // .lianghang{ justify-content: space-between; padding: 5px;
          //   .shopli{width: 48%; margin-bottom: 10px;}
          // }
          .yige{border-radius: 5px;
            .shopliimg{ width: 89px; margin-right: 10px;
              img{width: 89px;height: 89px; display: block;}
            }
            .shopliname{ color: #999; font-size: 12px;width: 150px;}
          }
          .liangge{width: 123px; border-radius: 5px;
            .shopliimg{ width: 123px;
              img{width: 123px; height: 123px; display: block; }
            }
            .shopliname{ color: #999; font-size: 12px;padding: 5px;}
          }

        }

        .fright {
          margin-left: 100px;
          padding-top: 50px;



        }
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
  .background_style{
    background: #F8F9FD;
    height: calc(100vh - 100px);
    padding-left:40px;
    border-top-left-radius: 30px;
    overflow: auto;
    .at_flex{
      margin: 30px 0;
      display: flex;
      font-weight: bold;
      font-size: 18px;
      img{
        width: 18px;
        height: 18px;
        margin: 4px 8px;
      }
    }
    .share_shop{
      display: flex;
      margin-top: 20px;
      margin-left: 30px;
     }
  /deep/  .el-radio-group{
      display: flex;
      margin-top: 20px;
      margin-left: 30px;

    }
  }
/deep/ .el-radio__input.is-checked .el-radio__inner {
background: #3158F1;
border:1px solid #3158F1;
 }
/deep/ .el-radio__input.is-checked+.el-radio__label{
color: black;
}
/deep/ .avatar-uploader-icon{
 background: white;
 border-radius: 12px;
}
/deep/ .el-input__inner{
  border-radius: 12px;
}
.tabs_container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  .tabs_container_item{
    border-bottom: 2px solid red;
  }
  div{
    font-size:14px;
    color: #797979;
  }
}
.template_select{
  margin-top: 20px;
  margin-left: 20px;
  span{
  font-size: 14px;
  margin-right: 10px;
  }

}
.condition_flex{
  display: flex;
  width: 100%;
  margin-bottom: 5px;
  align-items: center;
  justify-content: space-between;
  .share_btn{
    width: 60px;
    height: 25px;
    border-radius: 16px;
    background: #005AFF;
    font-size: 12px;
    text-align: center;
    line-height: 25px;
    color:white
  }
}
.notes_adress{
  color:#A65E31;
  font-size:10px;
  margin: 5px 0 5px 0;
}
.package_detail{
  font-size:10px;
  display: flex;

  .package_detail_item{
    margin-left: 3px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  
}
.tab_ipt{
  width: 100%;
  height: 100px;

}
.class_show{
  margin-left: 40px;
  .class_show_span{
    margin-left: 30px;
    color:#005AFF;
    cursor: pointer;
  }
  .defalt_belong{
    margin-top: 30px;
  }
}
.list_ul{
  display: flex;
  margin-top: 5px;
  li{
    font-size: 12px;
    margin-right: 4px;
    color: #575656;
  }
}

</style>
